<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="新增实例"
    width="800"
    :destroy-on-close="true"
  >
    <el-form :model="form">
      <el-form-item label="实例名称" :label-width="formLabelWidth">
        <el-input
          v-model="form.name"
          placeholder="请填写实例名称"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="实例端口" :label-width="formLabelWidth">
        <el-input
          v-model="form.port"
          placeholder="请填写端口"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="ue工程" :label-width="formLabelWidth">
        <el-select
          v-model="form.projectId"
          placeholder="请选择ue工程"
          @change="selectUefile"
        >
          <el-option
            v-for="item in uefiles"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否使用https协议" :label-width="formLabelWidth">
        <el-switch v-model="form.useHttps" />
      </el-form-item>
      <el-form-item
        label="https key文件"
        :label-width="formLabelWidth"
        v-show="form.useHttps"
      >
        <el-input
          v-model="form.httpsKeyFile"
          placeholder="请填写服务器中key文件路径"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="https cert文件"
        :label-width="formLabelWidth"
        v-show="form.useHttps"
      >
        <el-input
          v-model="form.httpsCertFile"
          placeholder="请填写服务器中cert文件地址"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="是否开启中继服务" :label-width="formLabelWidth">
        <el-switch v-model="form.useRelay" />
      </el-form-item>
      <el-form-item
        label="stun地址"
        :label-width="formLabelWidth"
        v-show="form.useRelay"
      >
        <el-input
          v-model="form.stun"
          placeholder="请填写stun地址"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="turn地址"
        :label-width="formLabelWidth"
        v-show="form.useRelay"
      >
        <el-input
          v-model="form.turn"
          placeholder="请填写turn地址"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="中继用户名"
        :label-width="formLabelWidth"
        v-show="form.useRelay"
      >
        <el-input
          v-model="form.relayUsername"
          placeholder="请填写用户名"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="中继密码"
        :label-width="formLabelWidth"
        v-show="form.useRelay"
      >
        <el-input
          v-model="form.relayPassword"
          placeholder="请填写密码"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineExpose, onMounted } from 'vue';
import { useAxios } from '@/hooks/useAxios';
const { post } = useAxios();
// 获取ue工程列表
const uefiles = reactive([]);
onMounted(() => {
  const data = {
    pageNo: 1,
    pageSize: -1,
  };
  post('/ueserver/getUefiles', data).then(res => {
    uefiles.length = 0;
    uefiles.push(...res.data);
  });
});
// 弹窗状态
const dialogFormVisible = ref(false);
const formLabelWidth = ref('140px');

const form = reactive({
  name: '',
  port: null,
  projectId: '',
  projectName: '',
  runStatus: false,
  connectStatus: false,
  useHttps: false,
  httpsKeyFile: '',
  httpsCertFile: '',
  useRelay: false,
  stun: '',
  turn: '',
  relayUsername: '',
  relayPassword: '',
});
// 选择ue工程，将名称填写至表单
const selectUefile = val => {
  const target = uefiles.find(item => item._id == val);
  form.projectName = target.name;
  console.log(form);
};
// 是否开启中继服务
// let relayStatus = ref(1);
// const relayChange = val => {
//   console.log(val);
// };
// 取消按钮
const cancle = () => {
  Object.assign(form, {
    name: '',
    port: null,
    projectId: '',
    projectName: '',
    runStatus: false,
    connectStatus: false,
    useHttps: false,
    httpsKeyFile: '',
    httpsCertFile: '',
    useRelay: false,
    stun: '',
    turn: '',
    relayUsername: '',
    relayPassword: '',
  });
  dialogFormVisible.value = false;
};
// 确认按钮
const emit = defineEmits(['updateList']);
const confirm = () => {
  post('/ueinstance/createInstance', form)
    .then(() => {
      emit('updateList');
    })
    .finally(() => {
      cancle();
    });
};
defineExpose({ dialogFormVisible });
</script>
